<template>
  <div class="app-container">
    <el-form ref="form"   :rules="rules" :model="form" label-width="150px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="push内容" prop="con">
            <el-input v-model="form.con" type="textarea" :rows="5" maxlength="200" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="push类型" prop="cate">
        <el-select v-model="form.cate" placeholder="请选择">
          <el-option
            v-for="item in shopCate"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="push跳转类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" @change="pushOption" clearable>
              <el-option
                v-for="item in pushCate"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 根据选择的跳转类型显示的配置信息区域 -->
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item label="链接" prop="json_data" v-if="form.type=='1'">
            <el-input v-model="form.json_data"></el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="链接" prop="json_data" v-if="form.type=='2'">
            <el-input v-model="form.json_data"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品关键词" prop="json_data" v-if="form.type=='3'">
            <el-input v-model="form.json_data"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目关键词" prop="json_data" v-if="form.type=='4'">
            <el-input v-model="form.json_data"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择项目分类" prop="json_data" v-if="form.type=='5'">
            <el-select v-model="form.json_data" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in ProjectClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择商品分类" prop="json_data" v-if="form.type=='6'">
            <el-select v-model="form.json_data" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in CommodityClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 地区 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="push地区范围" prop="address">
            <el-cascader v-model="form.address" :options="options" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="cancel">取消</el-button>
            <el-button type="primary" @click="save('form',2)">保存</el-button>
            <el-button type="primary" @click="save('form',1)">保存并上架</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  getPro,
  getProject,
  getCommodity,
  save
  // getCate,
  // changeStatus,
  // cardExport,
  // UpperStatus
} from "@/api/pushManageAdd";
export default {
  name: "pushManageAdd",
  data() {
    return {
      form: {
        title: "",
        con: "",
        type: "",
        json_data: "",
        province_id: "",
        address:[],
        tag: ""
      },
      //地区
      address: [],
      options: [],
      pushCate: [
        { id: 1, name: "默认消息" },
        { id: 2, name: "H5链接" },
        { id: 3, name: "商品关键词" },
        { id: 4, name: "项目关键词" },
        { id: 5, name: "项目分类" },
        { id: 6, name: "商品分类" },
        { id: 7, name: "plus主页" },
        { id: 8, name: "生美主页" }
      ],
      //项目类型
      ProjectClass: [],
      rules: {
        title: [
          { required: true, message: "请输入title标题", trigger: "blur" }
        ],
        con: [
          { required: true, message: "请输入push内容", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200个字符",
            trigger: "blur"
          }
        ],
        type: [
          { required: true, message: "请选择跳转类型", trigger: "change" }
        ],
        json_data: [
          { required: true, message: "请输入配置信息", trigger: ["blur",'change']  }
        ],
        address: [
          {  required: true, message: "请选择",trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.getArea();
    this.getUser();
    this.getCommodity();
  },
  mounted() {
    // console.log(this.$route.query);
    // this.form.id = Number(this.$route.query.id);
  },
  watch: {
    //监听类型
    "form.type"(val) {
      // console.log(val);
      this.form.json_data = "";
    },
    // 监听地区选项
    'form.address': function(val) {
      // console.log(val[0]);
      if (val) {
        this.form.province_id = val[0];
      }
    }
  },
  methods: {
    //取消
    cancel() {
      this.$router.go(-1);
    },
    //push类型改变
    pushOption(event, item) {
      // console.log(event)
      this.form.json_data = "";
    },
    //获取项目分类
    getUser() {
      getProject().then(res => {
        // console.log(res);
        const newArr = [];
        // console.log(res.data.data)
        res.data.data.forEach((item, index) => {
          newArr.push({
            value: item.value,
            label: item.label
          });
        });
        // console.log(newArr);
        this.ProjectClass = newArr;
      });
    },
    //获取商品分类
    getCommodity() {
      getCommodity().then(res => {
        // console.log(res);
        const newArr = [];
        // console.log(res.data.data)
        res.data.data.forEach((item, index) => {
          newArr.push({
            value: item.value,
            label: item.label
          });
        });
        // console.log(newArr);
        this.CommodityClass = newArr;
      });
    },
    // push省市区
    getArea() {
      getPro().then(res => {
        const newArr = [];
        // console.log(res);
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach(item2 => {
              newArr[index]["children"].push({
                value: item2.value,
                label: item2.label
              });
            });
          }
        });
        // this.options = res.data;
        newArr.unshift({
          label: "全国",
          value: 0
        });
        this.options = newArr;
      });
    },
    //保存
    save(formName, tag) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.tag = tag;
          let datas = {...this.form};
          delete this.form.address
          // console.log(datas)
          save(datas).then(res => {
            // console.log(res);
            if (res.data.code == 200) {
              this.$message({
                showClose: true,
                message: "添加成功",
                type: "success"
              });
              this.$router.push("/pushManageIndex");
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "有必填项没填",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 20px !important;
}
</style>